<template>
  <div class="search-bar">
    <header-bar :title="title">
      <template v-slot:backBtn>
        <i @click="$parent.isShowSearchBar=false" class="iconarrow_back"></i>
      </template>
    </header-bar>
    <div class="search-content">
      <search-sc
        v-focus
        :placeholder="placeholder"
        v-model="searchVal"
        @handleSearch="handleSearch"
      />
      <div class="search-data-content">
        <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp" :data="listDataLen">
          <div class="noData" v-if="listDataLen.length === 0&&!noMoreData">
            <div>
              <img :src="noData" alt />
              <p>请输入相关查询条件</p>
            </div>
          </div>
          <slot name="content"></slot>
          <div class="noData" v-if="listDataLen.length === 0&&noMoreData">
            <div>
              <img :src="noData" alt />
              <p>您还没有相关的记录</p>
            </div>
          </div>
          <p class="no-data-content" v-if="listDataLen.length > 0&&noMoreData">没有更多数据了</p>
        </cube-scroll>
      </div>
    </div>
  </div>
</template>

<script>
// 分页配置，暂不做

import noData from "./no_data.png";
export default {
  data() {
    return {
      searchVal: this.searchStr,
      noData,
      start: 1
    };
  },
  props: {
    hasPagination: {
      type: Boolean,
      default: false
    },
    pullingUp: {
      type: Function,
      defualt: () => {}
    },
    listDataLen: {
      type: Array,
      default() {
        return [];
      }
    },
    noMoreData: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "所属道路"
    },
    placeholder: {
      type: String,
      default: "请输入关键字进行搜索"
    },
    onSearch: {
      type: Function,
      required: false,
      default: () => {}
    }
  },
  computed: {
    options() {
      return {
        pullDownRefresh: false /* this.hasPagination? {
          threshold: 60,
          stop: 40,
          txt: '更新成功'
        }: this.hasPagination,*/,
        pullUpLoad: this.hasPagination,
        scrollbar: true
      };
    }
  },
  directives: {
    focus: {
      inserted: function(el) {
        // el.__vue__.$children[0].focus()
        el.querySelector(".cube-input-field").focus();
      }
    }
  },
  methods: {
    handleSearch() {
      if (this.searchVal === "") return;

      this.onSearch(this.searchVal);
    },
    onPullingDown() {
      this.pullDown();
    },
    onPullingUp() {
      if (this.noMoreData) {
        this.$refs.scroll.forceUpdate();
        return;
      }
      this.pullingUp(this.searchVal);
    }
  },
  components: {
    "header-bar": () => import("../header-bar/header-bar"),
    "search-sc": () => import("../search-sc/search-sc")
  }
};
</script>

<style lang="stylus">
.search-bar {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(245, 245, 245, 1);

  .search-content {
    background: rgba(245, 245, 245, 1);

    .search-data-content {
      height: calc(100vh - 88px);

      .search-data-ul {
        background: #fff;
        margin-top: 10px;

        .search-data-item {
          height: 44px;
          line-height: 44px;
          font-size: 15px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          text-indent: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .noData {
        width: 100%;
        height: 100%;
        margin-top: 50px;

        &>div {
          width: inherit;
          text-align: center;

          img {
            width: 90px;
            height: 90px;
          }

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 14px;
          }
        }
      }

      .no-data-content {
        padding: 12px;
        text-align: center;
      }
    }
  }
}
</style>
